
<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="tableBox">
            <div class="table-title" slot="table-title">
                    <div class="formBtn">
                       
                        <div class="btnPosition">
                           <el-button  @click="goback">返回</el-button>
                            <el-button  @click="addLeader">新增</el-button>
                        </div>
                    </div>
            </div>
            <el-table :data="dataApply" style="width: 100%" ref="singleTable" border>

                <el-table-column label="负责人姓名" align="center" prop="headerName"> 
                            <template scope="scope">
                                <span>{{scope.row.headerName | isNull}}</span>
                            </template>
                </el-table-column>
               
                <el-table-column label="e学云ID号" align="center" prop="eId">
                            <template scope="scope">
                                <span>{{scope.row.eId | isNull}}</span>
                            </template>
                </el-table-column>

                <el-table-column label="手机号码" align="center" prop="phone">
                            <template scope="scope">
                                <span>{{scope.row.phone | isNull}}</span>
                            </template>
                </el-table-column>

                <el-table-column label="负责人身份证号" align="center" >
                        <template scope="scope">
                            <span>{{scope.row.sIdentityId | isNull}}</span>
                        </template>
                </el-table-column>

                <el-table-column label="创建时间" align="center" prop="createTime">
                            <template scope="scope">
                                <span>{{scope.row.createTime | isNull}}</span>
                            </template>
                </el-table-column>

                <el-table-column label="创建人" align="center" prop="creator">
                            <template scope="scope">
                                <span>{{scope.row.creator | isNull}}</span>
                            </template>
                </el-table-column>

                <el-table-column align="center" label="状态" width="80">
                    <template scope="scope">
                        <span v-if="scope.row.status==0">启用</span>
                        <span v-if="scope.row.status==1">禁用</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="初始化密码" width="160">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="initializtion(scope.row)">初始化密码</el-button>
                    </template>
                </el-table-column>

                <el-table-column align="left" label="操作" width="200">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="revise(scope.row.headerId,scope.row.headerName,scope.row.phone, scope.row.sIdentityId)">修改</el-button>
                        <el-button type="text" class="btn-success" @click="deleteRow(scope.row)" :disabled="dataApply.length==1">删除</el-button>
                        <el-button type="text" class="btn-success" v-if="scope.row.status==0" @click="forbiden(scope.row)">禁用</el-button>
                        <el-button type="text" class="btn-success" v-if="scope.row.status==1" @click="awaken(scope.row)">启用</el-button>
                    </template>
                </el-table-column>   
            </el-table>  
             <div class="pagination-container">
                <p>* 一所学校至多可以增加 5 位负责人，学校负责人拥有e学云教育平台的超级管理权限。</p>      
            </div>
        </div>
        <addSchoolLeader :dialog="dialog" :dataForm1="dataForm1" @addSuccess='addSuccess' @reviseSuccess='reviseSuccess' ref='addSchoolLeader'></addSchoolLeader>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import {querySchoolOwner, initializePassword, permitOrForbidden, deleteSchoolOwner} from 'api/schoolManage';
import TableLayout from 'components/TableLayout';
import addSchoolLeader from './comps/addSchoolLeader';
import { mapState, mapActions } from 'vuex';
export default{
    name: 'leaderInfo',
    components: {TableLayout, Levelbar, addSchoolLeader},
    data() {
        return {
            dataApply: [],
            loading: true,
            dialog: {
                dialogFormVisible1: false,
                dialogFormVisible2: false
            },
            dataForm1: {
                schoolId: '',
                headerId: '',
                realname: '',
                phoneNum: ''
            }
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        })
    },
    created() {
        this.searchFetchData();
        this.dataForm1.schoolId = this.$route.params.schoolId;
    },
    
    methods: {
        ...mapActions(['ChangePageSize']),
        searchFetchData() {
            querySchoolOwner(this.$route.params.schoolId).then(response => {
                this.dataApply = response.data.content;
                this.loading = false;
            });
        },
        setCurrent(row) {
            this.$refs.singleTable.setCurrentRow(row);
        },
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },

        deleteRow(rows) {
            this.$confirm('确定要删除此账号?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                deleteSchoolOwner(rows.headerId, this.$route.params.schoolId).then(response => {
                    this.loading = true;
                    this.searchFetchData();
                    this.$message({
                        type: 'success',
                        message: response.data.errorMsg
                    })
                })
            }).catch(() => {
                this.$message.info('已取消');
            });
        },
        // 初始化密码
        initializtion(row) {
            this.$confirm('确定要初始化【'+row.headerName+'】的密码吗?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                initializePassword(row.headerId, row.phone).then(response => {
                    if (response.data.status == 200) {
                        this.$message({
                            type: 'success',
                            message: '初始化密码成功，新密码是111111'
                        });
                    } else {
                        this.$message.error(response.data.errorMsg);
                    }
                })     
            }).catch(() => {
                this.$message.info('已取消');     
            })
        },
        // 禁用负责人账号
        forbiden(row) {
            this.$confirm('确定要禁用负责人账号吗?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                permitOrForbidden(row.headerId, 1, this.$route.params.schoolId).then(response => {
                    this.loading = true;
                    this.searchFetchData();   
                    this.$message({
                        type: 'success',
                        message: response.data.errorMsg
                    })  
                }); 
            }).catch(() => {
                this.$message.info('已取消');
            });
        },
        // 启用负责任账号
        awaken(row) {
            this.$confirm('确定要启用负责人账号吗?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                permitOrForbidden(row.headerId, 0, this.$route.params.schoolId).then(response => {
                    this.loading = true;
                    this.searchFetchData();
                    this.$message({
                        type: 'success',
                        message: response.data.errorMsg
                    })
                })
            }).catch(() => {
                this.$message.info('已取消');
            });
        },
        onSubmit() {// 表单查询
            this.loading = true;
            this.searchFetchData();
        },
        // 添加成功
        addSuccess() {
            this.dialog.dialogFormVisible1=false;
            this.searchFetchData();
        },
        // 修改成功
        reviseSuccess() {
            this.dialog.dialogFormVisible2=false;
            this.searchFetchData();
        },
        goback() {
            this.$router.push({path: '/schoolManage'});
        },
        
        // 新增

        addLeader() {
            this.$refs.addSchoolLeader.loadingButton(); // 清除loading
            if (this.dataApply.length >= 5) {
                this.$message({
                    message: '最多可以添加5个管理员账号！'
                })
                return;
            }
            this.dialog.dialogFormVisible1=true;
        },
        // 修改
        revise(row, realName, phone, sIdentityId) {
            this.dataForm1.headerId = row;
            this.dataForm1.realname = realName;
            this.dataForm1.phoneNum = phone;
            this.dataForm1.sIdentityIdedit = sIdentityId;
            this.dialog.dialogFormVisible2=true;
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .tableBox{
        padding: 0 20px 30px;
        background: #fff;
        box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.1); 
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    }
    .pagination-container p{
            color:#b2b2b2;
            font-size:14px;
            margin-top:25px;
            margin-left:20px;
    }
    .formBtn{
        width: 100%;
        height: 70px;
        position: relative;
      
        .btnPosition{
            position: absolute;
            top: 18px;
        }
    }
}

</style>
